<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结算页面</title>
    <link rel="stylesheet" rel="icon" href="/mi/css/cart/settlement_cart.css" type="text/css" />
    <link rel="stylesheet" href="/mi/css/common/page_bottom.css">
    <link rel="stylesheet" href="/mi/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="/mi/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="icon" href="/mi/imgs/favicon.ico" type="image/x-icon" />

    <style>
        a{
            text-decoration: none;
        }
        a:hover{
            color:#333;
        }

    </style>
</head>
<body id="modalFuck">

    <div class="header">
        <div class="header-nav">
            <div class="header-log">
                <a href="/mi/index" target="_blank">
                    <img src="/mi/imgs/mi.png" alt="">
                </a>
            </div>
            <div class="header-middler">
                <h2>确定订单</h2>
            </div>

            <div class="header-end">
                <div class="header-e">

                </div>
                <div class="header-last">
                    <ul class="last-one">
                        <li class="last-two"><a href="">2589511490</a>
                            <ul class="inner">
                                <li class="one">个人中心</li>
                                <li class="two">评价晒单</li>
                                <li class="three">我的喜欢</li>
                                <li class="four">小米账户</li>
                                <li class="five">退出登入</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="header-last-two">
                    <span>&nbsp;|&nbsp;</span>
                    <a href="/mi/order/order_list">我的订单</a>

                </div>
            </div>
        </div>
    </div>

    <div class="middler">
        <div class="middler-header">
            <div class="middler-header-one">


                <div class="middler-nav" style="overflow:hidden;">
                    <div class="middler-nav-one">
                        <span style="color: #333;font-size: 18px;line-height: 20px;">收货地址</span>
                    </div>

                    <div id="outer">


                    </div>

                    <div id="bigAddress">


                    </div>


                    <div class=""style="margin-right: 15px ;float:left;">
                        <button type="button" class="middler-nav-three"   data-toggle="modal" data-target="#myModal" >

                            <span style="margin: auto">
                                <i style="width: 30px;height: 30px;border-radius: 50%;color:white;background-color: rgb(224, 224, 224);" class="iconfont">&#xe60c;</i>
                                添加新地址
                            </span>
                        </button>
                    </div>



                </div>





                <div class="middler-nav-four">
                    <div class="middler-nav-five" style="color: #333;
    font-size: 18px;
    line-height: 40px;">
                        商品及优惠券
                    </div>
                    <div class="middler-nav-six">
                        <c:forEach items="${productList}" var="c" varStatus="xh">
                        <div class="nav-one">
                            <div class="nav-two">
                                <img src="${c.picImg}" alt="">
                            </div>
                            <div class="nav-three">
                                <a href="" style="text-decoration: none;">${cartList.get(xh.index).paraName}</a>
                            </div>
                            <div class="nav-four">
                                <div class="four-one">${c.price}元 x ${cartList.get(xh.index).num}</div>
                                <div class="four-two"></div>
                                <div class="four-three">${cartList.get(xh.index).totalprice}元</div>
                            </div>
                        </div>
                            <input type="hidden" name="productIds" value="${c.productId}">
                            <input type="hidden" name="numList" value="${cartList.get(xh.index).num}">
                            <input type="hidden" name="cartIdList" value="${cartList.get(xh.index).cartId}">
                        </c:forEach>
                    </div>
                </div>
                <div class="nav-five">
                    <div class="five-one">
                        <div class="title-one">配送方式</div>
                    </div>
                    <div class="five-two">
                        <div class="title-two">包邮</div>
                    </div>
                </div>
                <div class="nav-six">
                    <div class="six-one">
                        <div class="title-one">发票</div>
                    </div>
                    <div class="six-two">
                        <div class="title-two">包邮&nbsp;&nbsp;个人&nbsp;&nbsp;商品明细></div>
                    </div>
                </div>
                <div class="nav-seven">
                    <div class="seven-one">
                        <div class="seven-two">+&nbsp;使用优惠券</div>
                        <div class="seven-three">+&nbsp;使用小米礼品卡</div>
                    </div>
                    <div class="seven-four">
                        <div class="seven-five">
                            <div class="seven-six">商品件数:</div>
                            <div class="seven-seven">${countProducts}件</div>
                        </div>
                        <div class="seven-five">
                            <div class="seven-six">商品总价:</div>
                            <div class="seven-seven">${totalPrices}元</div>
                        </div>
                        <div class="seven-five">
                            <div class="seven-six">活动优惠:</div>
                            <div class="seven-seven">-0元</div>
                        </div>
                        <div class="seven-five">
                            <div class="seven-six">优惠券抵扣:</div>
                            <div class="seven-seven">-0元</div>
                        </div>
                        <div class="seven-five">
                            <div class="seven-six">运费:</div>
                            <div class="seven-seven">0元</div>
                        </div>
                        <div class="seven-eight" style="line-height: 3;">
                            <div class="seven-nine">应付总额:</div>
                            <div class="seven-ten">
                                <em style="    font-size: 30px;
    line-height: 1;">${totalPrices}</em>元
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lasts">
                    <div class="lasts-one">
                        <a style="cursor: pointer;text-decoration: none;" id="gotoPay"  tabindex="100" data-toggle="popover" data-placement="right" data-trigger="focus" data-content="请选择地址">去结算</a>
                    </div>
                    <div class="lasts-two">
                        <a style="cursor: pointer;text-decoration: none;" id="returnCart">返回购物车</a>
                    </div>
                </div>
            </div>
        </div>
    </div>




<%--    <input type="hidden" id="productList" value="${productList}">--%>











    <!-- 选择地址的Modal -->
<div class="myModal">
    <div class="ak modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 100px;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">选择收货地址</h4>
                </div>

                <div class="modal-body" style="font-size: 26px;margin:auto;text-align: center;">
                    <div class="row">


                        <div class="col-md-6">
<%--                            <input id="name_tip"  type="hidden" >--%>
                            <input style="margin-top: 10px" id="userName" placeholder="姓名" class="form-control" tabindex="0" data-toggle="popover"  data-placement="top" data-trigger="focus" data-content="用户名为空">
                        </div>



                        <div class="col-md-6">
<%--                            <input  type="hidden" tabindex="0" id="phone_tip"  data-toggle="popover" data-placement="top" data-trigger="focus" data-content="手机号不能为空">--%>
                            <input style="margin-top: 10px" class="form-control" id="userPhone" placeholder="电话号" tabindex="0"   data-toggle="popover" data-placement="top" data-trigger="focus" data-content="手机号不能为空" >
                        </div>
                    </div>



                    <div class="row" style="margin-top: 14px ">
                        <div class="layui-inline" style="padding-left: 15px">
                            <form class="layui-form layui-form-pane" action="javascript:;">
                                <div class="layui-form-item" id="addressDiv">
                                    <div class="layui-input-inline" style="width: 183px;font-size: 14px; rgb(153, 153, 153)">
                                        <select name="P1" lay-filter="province" id="province">
                                            <option></option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline" style="width: 183px;font-size: 14px; color: rgb(153, 153, 153)">
                                        <select name="C1" lay-filter="city" id="city">
                                            <option></option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline" style="width: 183px;font-size: 14px;rgb(153, 153, 153)">
                                        <select name="A1" lay-filter="area" id="area">
                                            <option></option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>




                    <div style="margin: -5px auto 14px auto;">
<%--                        <input  type="hidden" tabindex="100" id="address_tip"  data-toggle="popover" data-placement="top" data-trigger="focus" data-content="手机号不能为空">--%>
                        <textarea id="userAddress" class="form-control" rows="3" placeholder="详细地址"  tabindex="100" data-toggle="popover" data-placement="top" data-trigger="focus" data-content="详细地址长度不对, 最小为5个字, 最大32个字"></textarea>
                    </div>

                    <div>
                        <input id="userZipcode" class="form-control" placeholder="地址邮编">
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" data-dismiss="modal" style="background-color: rgb(176, 176, 176); color: white;">取消</button>
                    <button type="button" class="btn" style="background-color: rgb(242, 88, 7); color: white;" onclick="addAddress(${user.userId})" >确定</button>
                </div>
            </div>
        </div>
    </div>
</div>






    <script src="/mi/plugins/layui-v2.6.8/layui/layui.js"></script>
    <script src="/mi/plugins/jquery/jquery.min.js"></script>
    <script src="/mi/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <!-- 底部公共部分 -->
    <%@include file="../common/page-bottom.jsp"%>

    <script type="text/javascript" src="/mi/js/cart/settlementCart.js"></script>

    <script>
        // document.getElementById("error_tip").onclick = function(){
        //     $('#error_tip').popover('show')
        // }
        // $('#userName').popover('show')
        // $('#phone_tip').popover('show')
        // $('#address_tip').popover('show')
    </script>
</body>
</html>